<template>
  <div class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper login-wrapper"
         v-if="isShow"
         ref="loginWrapper">
      <!-- <main class="aui-content login-content"
            :style="scale"> -->
      <div class="aui-content login-content">
        <div style="position: absolute;top: 75px;left: 120px;">
          <!-- <img src="~@/assets/img/kaijin.png" /> -->
          <img :src="str.logo1" />
        </div>
        <div class="login-body">
          <div class="login-pane">
            <div class="imgbox">
              <!-- <img src="~@/assets/img/kaijin-logo.png" /> -->
              <img :src="str.logo" />
            </div>
            <!-- <div class="login-title-en">Kaijin Smart Park</div> -->
            <div class="login-title-en">{{ str.en }}</div>
            <!-- <div class="login-title">凯金智慧园区综合管理平台</div> -->
            <div class="login-title">{{ str.ch }}</div>
            <!-- <div class="login-msg">请在下方登录你的账户</div> -->
            <div class="pic"><img src="~@/assets/img/pic.png" /></div>
            <login-page v-if="activeName === 'login'" />
            <registered v-else />
          </div>
        </div>
      </div>
      <!-- </main> -->
    </div>
    <not-support v-else />
  </div>
</template>

<script>
import loginPage from './login-page'
import registered from './registered'
import notSupport from './not-support'
import Cookies from 'js-cookie'
import { getBrowserInfo } from '@/utils'
export default {
  data () {
    return {
      activeName: 'login',
      scale: {
        transform: `scale(1)`
      },
      isShow: true,
      str: {}
    }
  },
  created () {
    if (getBrowserInfo() === 'Microsoft Internet Explorer') {
      this.isShow = false
    }
  },
  async mounted () {
    Cookies.remove('token')
    this.getLogo()
    // this.resizePage()
    // window.onresize = this.resizePage
    // window.addEventListener('resize', () => {
    //   this.loginPlanWid = '' + window.innerWidth * 0.36 + 'px'
    // })
  },
  components: {
    loginPage,
    registered,
    notSupport
  },
  methods: {
    resizePage () {
      let self = this
      const ref = this.$refs.loginWrapper
      if (!ref) { return }
      let width = ref.offsetWidth
      let height = ref.offsetHeight

      let leftNum = (1920 - width) / 2 - 10
      const topNum = (1080 - height) / 2
      let scaleX = width * 0.0004208
      let scaleY = height * 0.000865925
      // if (num > 1) {
      //   num = 1
      // }
      self.scale = {
        transform: `scale(${scaleX},${scaleY})`,
        left: `${-(leftNum) - 10}px`,
        top: `${-(topNum)}px`
      }
    },
    onActive (val) {
      this.activeName = val
    },
    async getLogo () {
      this.str = {
        logo: require('@/assets/img/logo-3c.png'),
        logo1: require('@/assets/img/ruien.png'),
        ch: '瑞恩智慧园区综合管理平台',
        en: 'Ruien Smart Park'
      }
      await this.$http.get('/tb/LogoSettingController/getLogo').then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.str.logo = res.data.loginLogoRight
        this.str.logo1 = res.data.loginLogoLeft
        this.str.ch = res.data.loginRightName1
        this.str.en = res.data.loginRightName2
      })
    }
    // getLogo () {
    //   let str = {
    //     logo: '',
    //     logo1: '',
    //     ch: '',
    //     en: ''
    //   }
    //   if (process.env.VUE_APP_LOGO === 'kaijin') {
    //     str.logo = require('@/assets/img/kaijin-logo.png')
    //     str.logo1 = require('@/assets/img/kaijin.png')
    //     str.en = 'Kaijin Smart Park'
    //     str.ch = '凯金智慧园区综合管理平台'
    //   }
    //   return str
    // }
  }
}
</script>
<style lang="scss" scoped>
body {
  background-color: transparent !important;

  .login-header {
    font-size: 20px;
    color: #00e1eb;

    .login-header-title {
      font-size: 40px;
      padding: 0;
      margin: 0;
    }
  }

  .aui-page__login {
    min-width: 1440px;

    .hide-box {
      width: 100%;
      height: 100%;
    }

    .login-wrapper {
      overflow: hidden;

      .login-content {
        width: 100%;
        height: 100%;
        position: relative;

        .login-body {
          width: 660px;
          height: 100%;
          position: fixed;
          right: 0;
          bottom: 0;
          top: 0;
          background-image: url(~@/assets/img/login-right.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-color: transparent;

          .login-pane {
            background-color: #fff;
            // width: 432px;
            text-align: left;
            // position: absolute;
            // right: 110px;
            // top: 72px;
            height: 100%;
            text-align: center;
            padding: 5%;
            padding-left: 10%;
            padding-right: 10%;

            .imgbox {
              img {
                width: 251px;
                height: 85px;
                margin-left: 0px;
              }
            }

            .login-title-en {
              margin-top: 20px;
              font-size: 42px;
              font-weight: bold;
            }

            .login-title {
              margin-top: 6px;
              font-size: 34px;
              font-weight: bold;
            }

            .pic {
              margin-bottom: 20px;
              margin-top: 20px;
              text-align: center;

              img {
                width: 148px;
                height: 148px;
              }
            }

            .login-msg {
              margin-top: 10px;
              margin-bottom: 47px;
              font-size: 20px;
              color: #787878;
            }
          }
        }
      }
    }

    &::before,
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      content: "";
    }

    &::before {
      // background-size: contain;
    }

    &::after {
      background-color: transparent;
    }
  }
}

@media (max-width: 1680px) {
  .login-body {
    width: 620px !important;
  }
}

@media (max-width: 1440px) {
  .login-body {
    width: 580px !important;
  }
}

@media (max-width: 1200px) {
  .login-body {
    width: 500px !important;
  }
}

@media (max-width: 1100px) {
  .login-body {
    width: 490px !important;
  }
}

@media (max-width: 1000px) {
  .login-body {
    width: 450px !important;
  }
}

@media (max-width: 850px) {
  .login-body {
    width: 380px !important;
  }
}

@media (max-width: 800px) {
  .login-body {
    width: 350px !important;
  }
}

@media (max-height: 900px) {
  .login-pane {
    height: 800px !important;
    padding-left: 8% !important;
    padding-right: 8% !important;

    .login-title-en {
      font-size: 38px !important;
    }

    .login-title {
      font-size: 28px !important;
    }
  }
}

@media (max-height: 852px) {
  .login-pane {
    padding-left: 6% !important;
    padding-right: 6% !important;
    height: 700px !important;

    .login-title-en {
      font-size: 35px !important;
    }

    .login-title {
      font-size: 25px !important;
    }

    .pic {
      img {
        width: 125px !important;
        height: 125px !important;
      }
    }

    .login-form {
      transform: scale(0.9) translateY(-20px);
    }
  }
}

@media (max-height: 750px) {
  .login-pane {
    height: 700px !important;
    padding-left: 4% !important;
    padding-right: 4% !important;

    .login-title-en {
      font-size: 32px !important;
    }

    .login-title {
      font-size: 22px !important;
    }

    .pic {
      img {
        width: 110px !important;
        height: 110px !important;
      }
    }

    .login-form {
      transform: scale(0.7) translateY(-80px);
    }
  }
}

@media (max-height: 537px) {
  .login-pane {
    height: 480px !important;
    padding: 0 !important;

    .imgbox {
      img {
        width: 176px !important;
        height: 60px !important;
        margin-left: 0px !important;
      }
    }

    .login-title-en {
      margin-top: 5px !important;
      font-size: 28px !important;
    }

    .login-title {
      font-size: 18px !important;
    }

    .pic {
      img {
        width: 90px !important;
        height: 90px !important;
      }
    }

    .login-form {
      transform: scale(0.6) translateY(-110px);
    }
  }
}

@media (max-height: 433px) {
  .login-body {
    padding: 5px 6px !important;

    .login-pane {
      height: 400px !important;
      padding: 0 !important;

      .imgbox {
        img {
          width: 126px !important;
          height: 43px !important;
          margin-left: 0px !important;
        }
      }

      .login-title-en {
        font-size: 25px !important;
      }

      .login-title {
        font-size: 15px !important;
      }

      .pic {
        margin-bottom: 5px !important;
        margin-top: 5px !important;

        img {
          width: 90px !important;
          height: 90px !important;
        }
      }

      .login-form {
        transform: scale(0.6) translateY(-110px);
      }
    }
  }
}
</style>
